<template>
  <el-dialog
    :close-on-click-modal="false"
    width="85%"
    title="查看考核标准"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-form status-icon :model="datas" ref="addEdit">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-table
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            :data="tableData"
            border
            max-height="300"
            size="mini"
            style="width: 100%"
          >
            <el-table-column
             
              prop="name"
              label="考核标准"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.isSet">
                  <quill-editor
                  v-model="selectRow.name"
                  :options="editorOption"
                  ref="myQuillEditor"
                >
                </quill-editor>
                  <!-- <el-input
                    autofocus
                    size="mini"
                    type="textarea"
                    autosize
                    placeholder="请输入内容"
                    v-model="selectRow.name"
                  ></el-input> -->
                </span>
                <span v-else v-html="scope.row.name"></span>
              </template>
            </el-table-column>
            <el-table-column prop="orgname" label="所属部门" width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.isSet">
                  <SearchParts
                    :size="'mini'"
                    :orgname="selectRow.orgname"
                    @chosePart="chosepart"
                  />
                </span>
                <span v-else>{{ scope.row.orgname }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="type"
              label="类型"
              width="160"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.isSet">
                  <el-select
                    size="mini"
                    v-model="selectRow.type"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="无" :value="0"></el-option>
                    <el-option label="考核项目经理" :value="1"></el-option>
                    <el-option label="考核项目成员" :value="2"></el-option>
                  </el-select>
                </span>
                <div v-else>
                  <span v-if="scope.row.type == 0">无</span>
                  <span v-if="scope.row.type == 1">考核项目经理</span>
                  <span v-if="scope.row.type == 2">考核项目成员</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="weight"
              label="权重（%）"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.isSet">
                  <el-input-number
                    size="mini"
                    autofocus
                    v-model="selectRow.weight"
                    :precision="0"
                    :step="1"
                    :min="0"
                    :max="100"
                    style="width: 100%"
                  ></el-input-number>
                </span>
                <span v-else>{{ scope.row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="sort"
              label="排序"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.isSet">
                  <el-input-number
                    size="mini"
                    autofocus
                    v-model="selectRow.sort"
                    :precision="0"
                    :step="1"
                    style="width: 100%"
                  ></el-input-number>
                </span>
                <span v-else>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="是否禁用" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.isSet">
                  <el-select
                    size="mini"
                    v-model="selectRow.status"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="2"></el-option>
                  </el-select>
                </span>
                <div v-else>
                  <span>{{ scope.row.status == 1 ? "启用" : "禁用" }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="version" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="editStandard(scope.row, scope.$index, true)"
                  >{{ scope.row.isSet ? "保存" : "编辑" }}</el-button
                >
                <el-button
                  v-if="scope.row.isSet"
                  type="text"
                  size="small"
                  @click="editStandard(scope.row, scope.$index, false)"
                  >取消</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delStandard(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import perSetAPI from "@apis/performanceSet";
import SearchParts from "@light-app/views/searchParts";
const toolbarOptions = [
		["bold", "italic"], // 加粗 斜体 下划线 删除线
	];
export default {
  name: "addEdit",
  props: {
    visible: Boolean,
    baseStyle: Object,
    title: String,
    datas: {
      type: Object,
    },
    saveForm: Function,
  },
  data() {
    return {
      loading: false,
      tableData: [],
      selectRow: null,
      		editorOption: {
					placeholder: "请输入...",
					modules: {
						toolbar: {
							container: toolbarOptions,
						},
					},
					theme: "snow",
				},
    };
  },
  computed: {},
  components: {
    SearchParts,
  },
  created() {
    this.loading = true;
    this.getList(this.datas.id);
  },
  methods: {
    //所属部门选择
    chosepart(val) {
      this.selectRow.orgname = val.label;
      this.selectRow.orgid = val.id;
      // console.log("val：", val);
    },

    close() {
      this.$emit("update:visible", false);
    },
    //获取table数据
    getList(val) {
      perSetAPI
        .spotGetList({
          pid: val,
          pageNo: 1,
          pageSize: 100,
        })
        .then((res) => {
          let datas = [];
          res.data.map((item, index) => {
            datas.push({ ...item, isSet: false });
          });
          this.tableData = [...datas];
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    delStandard(row) {
      this.loading = true;
      perSetAPI
        .spotDel(row.id)
        .then((res) => {
          this.getList(this.datas.id);
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    editStandard(row, index, cg) {
      //点击修改 判断是否已经保存所有操作
      for (let i of this.tableData) {
        if (i.isSet && i.id != row.id) {
          this.$message.warning("请先保存当前编辑项");
          return false;
        }
      }
      //是否是取消操作
      if (!cg) {
        if (!this.selectRow.id) this.tableData.splice(index, 1);
        return (row.isSet = !row.isSet);
      }
      //提交数据
      if (row.isSet) {
        let val = {
          id: this.selectRow.id,
          name: this.selectRow.name,
          content_id: this.selectRow.content_id,
          score: this.selectRow.score,
          weight: this.selectRow.weight,
          sort: this.selectRow.sort,
          type: this.selectRow.type,
          orgid: this.selectRow.orgid,
          orgname: this.selectRow.orgname,
          status: this.selectRow.status ? this.selectRow.status : 1,
        };
        this.loading = true;
        perSetAPI
          .spotEdit(val)
          .then((res) => {
            this.getList(this.datas.id);
          })
          .catch((err) => this.$message.error(err.message));
      } else {
        this.selectRow = JSON.parse(JSON.stringify(row));
        row.isSet = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>